<template>
    <div class="loginPage">
            <!-- tab -->
         <navbar class="navbar">
            <navbar-item type="title">
                    <text class="text">登录账号</text>
            </navbar-item>
            
        </navbar> 
        

        <div class="logo">
            <image class="image" src="../images/logo.png"></image>
        </div>

        <div class="formInput">
            <div class="iphoneNum">
                <icon class="presonIcon" :eeui="{
                    content:iconList[0],
                    fontSize:45,
                    color:'#242424'}"></icon>
                <input class="inputNum" type="tel"  v-model="iphone" placeholder="请输入手机号码" placeholder-color="#c7c7c7">
            </div>
            <div class="iphoneNum">
                <icon class="presonIcon" :eeui="{
                    content:iconList[1],
                    fontSize:45,
                    color:'#242424'}"></icon>
                <input class="inputNum" type="password" v-model="password"  placeholder="请输入密码" placeholder-color="#c7c7c7">
            </div>
            <text class="ftext" @click="forgePassword">忘记密码?</text>
            <button class="button" @click="getUserLogin" :eeui="{text:'登陆',backgroundColor:'#5fb527'}"></button>
            <button class="button2" 
            @click="rechargePage"
            :eeui="{
                text:'没有账号？立即注册',
                backgroundColor:'#e7e8ec',
                borderColor:'#75cc3d',
                borderWidth:'2',
                borderRadius:'100',
                color:'#75cc3d'
                }">
                </button>
        </div>


        





    
    </div>
</template>
<script>
const eeui = app.requireModule('eeui');
require("../../fetch");
export default {
    data () {
        return {
            password:'',
            iphone:'',
            token:'',
            iconList:[
                'md-phone-portrait',
                'md-lock'
            ]
        }
    },
    methods: {
        forgePassword() {
            eeui.openPage({
                url: 'findPassword.js',
                statusBarColor:'#1eb76e',
            }, function(result) {
                //......
            }); 
        },
        rechargePage() {
            eeui.openPage({
                url: 'recharge.js',
                statusBarColor:'#1eb76e',
            }, function(result) {
                //......
            }); 
        },
        //用户登陆
        getUserLogin() {
            var self = this;
            let params = {
                mobile:this.iphone,
                password:this.password,
                mobile_type:'12323',
                mobile_platform:'1',
                mobile_uuid:'1222',
                umeng_token:'1234'
            };

            if(params.mobile == ''){
                eeui.toast('手机号不能为空');
                return;
            }
            let myreg=/^1\d{10}$/;
            if(!myreg.test(params.mobile)){
                eeui.toast('手机格式不正确！');
                return;
            }
            if(params.password == ''){
                eeui.toast('密码不能为空');
                return;
            }
            let reg=/^\d{6}$/;
            if(!reg.test(params.password)){
                eeui.toast('密码不正确！');
                return;
            }
            
            

            this.$fetch({
                name: 'getUserLogin', // api.js文件中的key
                method: 'PUT',
                data: params,
            }).then((res) => {
                // 返回数据
                self.token = res.token;
                eeui.openPage({
                url: '../index.js',
                statusBarColor:'#1eb76e',
                params:{token:self.token},
                }, function(result) {
                    //......
                }); 
                
            }).catch((err) => {
                eeui.toast(err.headers['x-mzq-message']);
            });
        },
    },
}
</script>
<style scoped>
.loginPage{
    background-color: #e7e8ec;
}
    .navbar {
        width: 750px;
        height: 100px;
        background-color: #e7e8ec;
    }
    .icon {
        width: 100px;
        height: 100px;
        color: #666;
    }
    .text {
        font-size: 36px;
        color: #1c1d21;
    }
    .logo{
        margin-top: 40;
        width: 150;
        height: 150;
        align-self: center;
    }
    .image{
        width: 150px;
        height: 150px;
        
    }
    .iphoneNum{
        width: 600px;
        align-self: center;
        position: relative;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 20;
        
    }
    .presonIcon{
        width: 120px;
        height: 40px;
        position: absolute;
        top: 30;
        left: 0;
        border-right-color: #999;
        border-right-style: solid;
        border-right-width: 1px;

    }
    .inputNum{
         padding-left: 10px;
        height: 100px;
        font-size: 30px;
        width: 600px;
        border-radius: 20px;
        padding-left: 150px;
        

    }
    .button {
        font-size: 24px;
        margin-bottom: 20px;
        width: 450px;
        height: 100px;
        border-radius: 100px;
        align-self: center;
        margin-top: 40px;
        font-size: 32;
    }

    .button2 {
        font-size: 24px;
        margin-bottom: 20px;
        width: 450px;
        height: 100px;
        align-self: center;
        margin-top: 20px;
        font-size: 32;
    }
    .ftext{
        text-align: right;
        color: #97989c;
        font-size: 26;
        margin-right: 80;
        margin-top: 30px;
        height: 40px;
    }
    .gorecharge{
        margin-right: 20px;
        font-size: 32;
        color: #444;
    }
</style>